import javafx.ui.*;
import javafx.ui.canvas.*;
import javafx.ui.filter.*;

class AnimationExample extends CompositeNode {
    attribute width: Number;
    attribute height: Number;
    attribute opacityValue: Number;
    attribute rotationValue: Number;
    attribute blurValue: Number;
    private attribute blur: GaussianBlur;
}
/*
trigger on AnimationExample.blurValue = newValue {
    blur = GaussianBlur { radius: blurValue};
}*/
trigger on AnimationExample.blurValue = newValue {
    blur = GaussianBlur { radius: blurValue};
}

// Initial values
attribute AnimationExample.width = 200;
attribute AnimationExample.height = 100;
attribute AnimationExample.opacityValue = 1.0;
attribute AnimationExample.rotationValue = 0;

function AnimationExample.composeNode() = 

    Group {
        content:
        [Rect {
            width: bind width
            height: bind height
            arcHeight: 20
            arcWidth: 20
            opacity: bind opacityValue
            filter: bind blur
            transform: bind [translate(80, 50), rotate(rotationValue, width/2, height/2)]
            fill: dodgerblue
            stroke: darkblue
            strokeWidth: 2
        },
        View {
            content: GroupPanel {
                cursor: DEFAULT
                var row = Row {alignment: BASELINE}
                var column1 = Column { }
                var column2 = Column { }
                var column3 = Column { }
                var column4 = Column { }
				var column5 = Column { }
				var column6 = Column { }
                rows: [row]
                columns: [column1, column2, column3, column4, column5, column6]
                content:
                [SimpleLabel {
                    row: row
                    column: column1
                    text: "Animate:"
                },
                Button {
                    row: row
                    column: column2
                    opaque: false
                    mnemonic: W
                    text: "Width"
                    action: operation() {
                        width = [0..200] dur 1000;
                    }
                },
                Button {
                    row: row
                    column: column3
                    opaque: false
                    mnemonic: H
                    text: "Height"
                    action: operation() {
                        height = [0..80] dur 1000;
                    }
                },
                Button {
                    row: row
                    column: column4
                    opaque: false
                    mnemonic: O
                    text: "Opacity"
                    action: operation() {
                        opacityValue = [0.00,0.01 .. 1.00] dur 1000;
                    }
                },
                Button {
                    row: row
                    column: column5
                    opaque: false
                    mnemonic: R
                    text: "Rotation"
                    action: operation() {
                        rotationValue = [0..360] dur 1000;
                    }
                },
                 Button {
                    row: row
                    column: column6
                    opaque: false
                    mnemonic: B
                    text: "Blur"
                    action: operation() {
                        blurValue = [10, 9 .. 0] dur 1000;
                    }
                },]
            }
        }]
    }
;

Canvas {
    content: AnimationExample {
    }
}
